<div class="layers-management" #containerElement>
  <div class="layers-management-header">图层</div>
  <ul class="layers-management-body" ngxDroppable [model]="layers$ | async" (drop)="onLayersSortChange($event)">
    <ng-template ngFor let-item [ngForOf]="(layers$ | async)">
      <li class="layer-item" ngxDraggable [model]="item" *ngIf="item">
        <ege-layer-item 
        [buttons]="{
          spaceQuery: {
            visible: true,
            disabled: !((spatialQueryUseable$ | async) && item.queryable),
            dot: layers[item.id].spaceQueryCondition
          },
          propertiesQuery: {
            visible: true,
            disabled: !item.queryable,
            dot: layers[item.id].queryRules
          },
          viewTable: {
            visible: true,
            disabled: !item.tableViewable
          },
          menubar: {
            visible: true,
            disabled: false
          }
        }"
        [draggable]="true"
        [title]="item.title" 
        [checked]="item.visiable"
        [loading]="item.loading" 
        [disabled]="item.disabled" 
        [loadError]="item.loadError"
        (checkedChange)="onCheckedChange($event, item)"
        (spatialQuery)="onSpaceQuery(item)"
        (propertiesQuery)="onPropertiesQuery(layers[item.id])"
        (openTable)="openTable(item)"
        (reload)="onReload(item)"
        (remove)="onRemove(item)">
          <ul class="layer-menu-container">
            <li class="layer-menu-item">图层属性</li>
            <li class="layer-menu-divider"></li>
            <li class="layer-menu-item" 
            [ngClass]="{'layer-menu-item-disabled': !layers[item.id].queryCondition}"
            (click)="layers[item.id].queryCondition && cancelPropertyQuery(item.id)">取消属性查询</li>   
            <li class="layer-menu-item" 
            [ngClass]="{'layer-menu-item-disabled': !layers[item.id].spaceQueryCondition}"
            (click)="layers[item.id].spaceQueryCondition && cancelSpaceQuery(item.id)">取消空间查询</li>   
            <li class="layer-menu-item" 
            [ngClass]="{'layer-menu-item-disabled': !item.queryResult}"
            (click)="item.queryResult && cancelQuery(item.id)">取消查询</li>   
            <li class="layer-menu-divider"></li>
            <li class="layer-menu-item"
            [ngClass]="{'layer-menu-item-disabled': !getExtent(item.id) }"
            (click)="getExtent(item.id) && zoomToLayerExtent(item.id)">缩放到图层</li>                        
            <li class="layer-menu-divider"></li>
            <li class="layer-menu-item layer-menu-item-danger" (click)="onRemove(item)">移除图层</li>
          </ul>
        </ege-layer-item>
      </li>
    </ng-template>          
  </ul>
  <div class="layers-management-header">数据</div>
  <ul class="layers-management-body">
    <ng-template ngFor let-item [ngForOf]="(datas$ | async)">
      <li class="layer-item">
        <ege-layer-item 
        [buttons]="{
          spaceQuery: {
            visible: false
          },
          propertiesQuery: {
            visible: false
          },
          viewTable: {
            visible: true,
            disabled: false
          },
          menubar: {
            visible: true,
            disabled: false
          }
        }"
        [title]="item.title" 
        [loading]="item.loading" 
        [disabled]="item.disabled" 
        [hasCheckbox]="false" 
        [draggable]="false"
        [loadError]="item.loadError"
        (openTable)="openTable(item)"
        (reload)="onReload(item)"
        (remove)="onRemove(item)">
          <ul class="layer-menu-container">
            <li class="layer-menu-item">数据属性</li>
            <li class="layer-menu-divider"></li>
            <li class="layer-menu-item layer-menu-item-danger" (click)="onRemove(item)">移除数据</li>
          </ul>
        </ege-layer-item>
      </li>
    </ng-template>
  </ul>
  <div class="layers-management-bottom">
    <!-- <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="onClickImportData()">
      <span>导入数据</span>
    </button> -->
    <nz-popconfirm [nzTitle]="'确定要清空吗？'" (nzOnConfirm)="onConfirmClear()">
      <button nz-button nz-popconfirm [nzType]="'default'" [nzSize]="'large'" [disabled]="(total$ | async) === 0">
        <span>清空</span>
      </button>
    </nz-popconfirm>
  </div>
</div>